import React, { useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import Item from './Item'
export default function Main() {
  const list = useSelector((state) => {
    console.log(state, 9977755)
    if (state.filter === 'all') {
      return state.todo
    } else if (state.filter === 'active') {
      return state.todo.filter((item) => !item.isDone)
    } else {
      return state.todo.filter((item) => item.isDone)
    }
  })
  const dispatch = useDispatch()
  console.log(list)
  const [allChk, setAllChk] = useState(false)
  return (
    <section className="main">
      <input
        onChange={() => {
          //  实现全选
          setAllChk(!allChk)
          dispatch({
            type: 'todo/changeAll',
            payload: !allChk,
          })
        }}
        checked={allChk}
        id="toggle-all"
        className="toggle-all"
        type="checkbox"
      />
      <label htmlFor="toggle-all">Mark all as complete</label>
      <ul className="todo-list">
        {list.map((it) => (
          <Item key={it.id} todo={it} />
        ))}
      </ul>
    </section>
  )
}
